<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reactive赋值研究</title>
</head>

<body>


    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <div id="Application">

        <h1>测试数据1：{{arr1}}</h1>
        <button @click="add1">点击</button>
        <h1>测试数据2：{{arr2}}</h1>
        <button @click="add2">点击</button>
        <h1>测试数据3：{{arr3}}</h1>
        <button @click="add3">点击</button>
    </div>
    <script>
        const App = Vue.createApp({
            setup() {

                //对于异步请求到的数组来说，有两种方式接受数据，因为reactive是由proxy代理的对象，不能直接赋值，否则会覆盖proxy对象，破坏响应式
                //方法一：可以使用push加解构
                const arr1 = Vue.reactive([])
                //const arr = Vue.reactive < string[] > ([])
                const add1 = () => {
                    setTimeout(() => {
                        let res = ['1', '2', '3']
                        arr1.push(...res)
                    }, 500)
                }
                //方法二：可以将reactive变成一个对象，在对象里添加一个数组来进行赋值
                const arr2 = Vue.reactive({ arr: [] });
                //const arr1 = reactive < { arr: string[] } > ({ arr: [] });
                const add2 = () => {
                    setTimeout(() => {
                        let res = ['1', '2', '3']
                        arr2.arr = res
                    }, 500)

                }
                //方法三
                const arr3 = Vue.reactive([])
                const add3 = () => {
                    //赋值
                    arr3.length = 0
                    let newData = ['1', '2', '3']
                    arr3.push(...newData)
                    //要赋值的新数组
                }


                return {
                    arr1,
                    add1,
                    arr2,
                    add2,
                    arr3,
                    add3
                };
            },

        });
        App.mount("#Application");
    </script>
</body>

</html>